import {
  CommentOutlined,
  FireOutlined,
  HeartOutlined,
  ReadOutlined,
  RocketOutlined,
  SmileOutlined
} from '@ant-design/icons'
import { Prompts } from '@ant-design/x'
import type { PromptsProps } from '@ant-design/x'
import { App, Card, ConfigProvider, Space, theme } from 'antd'
import React, { FC } from 'react'

const renderTitle = (icon: React.ReactElement, title: string) => (
  <Space align="start">
    {icon}
    <span>{title}</span>
  </Space>
)

const items: PromptsProps['items'] = [
  {
    key: '1',
    label: renderTitle(<FireOutlined style={{ color: '#FF4D4F' }} />, '热门话题'),
    description: '你感兴趣什么？',
    children: [
      {
        key: '1-1',
        description: `X中有什么新内容？`
      },
      {
        key: '1-2',
        description: `什么是AGI？`
      },
      {
        key: '1-3',
        description: `文档在哪里？`
      }
    ]
  },
  {
    key: '2',
    label: renderTitle(<ReadOutlined style={{ color: '#1890FF' }} />, '设计指南'),
    description: '如何设计一个好的产品？',
    children: [
      {
        key: '2-1',
        icon: <HeartOutlined />,
        description: `了解用户需求`
      },
      {
        key: '2-2',
        icon: <SmileOutlined />,
        description: `设定AI角色`
      },
      {
        key: '2-3',
        icon: <CommentOutlined />,
        description: `表达情感`
      }
    ]
  },
  {
    key: '3',
    label: renderTitle(<RocketOutlined style={{ color: '#722ED1' }} />, '开始创作'),
    description: '如何启动一个新项目？',
    children: [
      {
        key: '3-1',
        label: '快速开始',
        description: `安装Ant Design X`
      },
      {
        key: '3-2',
        label: '在线体验',
        description: `在网页上无需安装即可体验`
      }
    ]
  }
]

const EmptyPrompt: FC = () => {
  const { message } = App.useApp()

  return (
    <ConfigProvider
      theme={{
        algorithm: theme.defaultAlgorithm
      }}
    >
      <Card style={{ borderRadius: 0, border: 0 }}>
        <Prompts
          title="你想问什么？"
          items={items}
          wrap
          styles={{
            item: {
              flex: 'none',
              width: 'calc(32%)',
              backgroundImage: `linear-gradient(137deg, #e5f4ff 0%, #efe7ff 100%)`,
              border: 0
            },
            subItem: {
              background: 'rgba(255,255,255,0.45)',
              border: '1px solid #FFF'
            }
          }}
          onItemClick={info => {
            message.success(`You clicked a prompt: ${info.data.key}`)
          }}
        />
      </Card>
    </ConfigProvider>
  )
}

export default EmptyPrompt
